<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Evo Calendar</title>

    <meta charset="UTF-8">
    <meta name="description" content="Simple Modern-looking Event Calendar Plugin">
    <meta name="keywords" content="jQuery, Plugin, Event, Calendar, EvoCalendar">
    <meta name="author" content="Edlyn Villegas">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="icon" href="favicon.png">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/resources/css/evo-calendar.min.css">
    <link rel="stylesheet" type="text/css" href="/resources/css/evo-calendar.orange-coral.min.css">
    <link rel="stylesheet" type="text/css" href="/resources/css/evo-calendar.midnight-blue.min.css">
    <link rel="stylesheet" type="text/css" href="/resources/css/evo-calendar.royal-navy.min.css">

    <link rel="stylesheet" type="text/css" href="/resources/css/demo.css">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">
</head>
<body>

<main>
    <div class="main-container">


        <section id="demos">
            <div class="section-content">
                <p class="section-title --shrt">活动列表</p>
<%--                <div class="action-buttons">--%>
<%--                    <p class="section-desc">Experience evocalendar in every theme</p>--%>
<%--                    <button class="btn-action active" data-set-theme="Default">DEFAULT</button>--%>
<%--                    <button class="btn-action" data-set-theme="Midnight Blue">MIDNIGHT BLUE</button>--%>
<%--                    <button class="btn-action" data-set-theme="Royal Navy">ROYAL NAVY</button>--%>
<%--                    <button class="btn-action" data-set-theme="Orange Coral">ORANGE CORAL</button>--%>
<%--                </div>--%>
                <div class="console-log">
                    <div class="log-content">
                        <div class="--noshadow" id="demoEvoCalendar"></div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="btn-action" id="addBtn">ADD EVENT</button>
                    <button class="btn-action" id="removeBtn" disabled>REMOVE EVENT</button>
                </div>
            </div>
        </section>


<%--        <section id="usage">--%>
<%--            <div class="section-content">--%>
<%--                <p class="section-title --lng">let the coding begins!</p>--%>
<%--                <div class="section-caption"><p>html</p></div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code>--%>
<%--<span class="green">// Set up your HTML markup</span>--%>
<%--<span class="red">&lt;div <span class="blue">id</span><span class="white">=</span><span class="yellow">"calendar"</span>&gt;&lt;/div&gt;</span>--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="section-caption"><p>css</p></div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code>--%>
<%--<span class="green">// Add evo-calendar.css (default theme included) in the &lt;head&gt; tag</span>--%>
<%--<span class="red">&lt;link <span class="blue">rel</span><span class="white">=</span><span--%>
<%--        class="yellow">"stylesheet"</span> <span class="blue">type</span><span class="white">=</span><span--%>
<%--        class="yellow">"text/css"</span> <span class="blue">href</span><span class="white">=</span><span class="yellow">"css/evo-calendar.css"</span>/&gt;</span>--%>
<%--<span class="green">// Themes? Add them right after the main css</span>--%>
<%--<span class="red">&lt;link <span class="blue">rel</span><span class="white">=</span><span--%>
<%--        class="yellow">"stylesheet"</span> <span class="blue">type</span><span class="white">=</span><span--%>
<%--        class="yellow">"text/css"</span> <span class="blue">href</span><span class="white">=</span><span class="yellow">"css/evo-calendar.midnight-blue.css"</span>/&gt;</span>--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="section-caption"><p>javascript</p></div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code>--%>
<%--<span class="green">// Add evo-calendar.js before your closing &lt;body&gt; tag, right after jQuery (required)</span>--%>
<%--<span class="red">&lt;script <span class="blue">src</span><span class="white">=</span><span class="yellow">"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"</span>&gt;&lt;/script&gt;</span>--%>
<%--<span class="red">&lt;script <span class="blue">src</span><span class="white">=</span><span class="yellow">"js/evo-calendar.js"</span>&gt;&lt;/script&gt;</span>--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code>--%>
<%--<span class="green">// Initialize evo-calendar in your script file or an inline &lt;script&gt; tag</span>--%>
<%--$(<span class="blue">document</span>).<span class="yellow">ready</span>(<span class="blue">function</span>() {--%>
<%--    $(<span class="red">'#calendar'</span>).<span class="yellow">evoCalendar</span>({--%>
<%--        <span class="violet">settingName</span>: settingValue--%>
<%--    })--%>
<%--})--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="section-caption"><p>basic html complete look:</p></div>--%>
<%--                <div class="console-log --md">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code>--%>
<%--<span class="red">&lt;html&gt;</span>--%>
<%--    <span class="red">&lt;head&gt;</span>--%>
<%--        <span class="red">&lt;title&gt;<span class="white">My Evo Calendar</span>&lt;/title&gt;</span>--%>
<%--        <span class="green">// evo-calendar.css, followed by [theme-name].css (optional)</span>--%>
<%--        <span class="red">&lt;link <span class="blue">rel</span><span class="white">=</span><span class="yellow">"stylesheet"</span> <span--%>
<%--                class="blue">type</span><span class="white">=</span><span class="yellow">"text/css"</span> <span--%>
<%--                class="blue">href</span><span class="white">=</span><span class="yellow">"css/evo-calendar.css"</span>/&gt;</span>--%>
<%--        <span class="red">&lt;link <span class="blue">rel</span><span class="white">=</span><span class="yellow">"stylesheet"</span> <span--%>
<%--                class="blue">type</span><span class="white">=</span><span class="yellow">"text/css"</span> <span--%>
<%--                class="blue">href</span><span class="white">=</span><span class="yellow">"css/evo-calendar.midnight-blue.css"</span>/&gt;</span>--%>
<%--    <span class="red">&lt;/head&gt;</span>--%>
<%--    <span class="red">&lt;body&gt;</span>--%>

<%--        <span class="green">// this is where your calendar goes.. :)</span>--%>
<%--        <span class="red">&lt;div <span class="blue">id</span><span class="white">=</span><span class="yellow">"calendar"</span>&gt;&lt;/div&gt;</span>--%>

<%--        <span class="green">// evo-calendar.js, right after jQuery (required)</span>--%>
<%--        <span class="red">&lt;script <span class="blue">src</span><span class="white">=</span><span class="yellow">"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"</span>&gt;&lt;/script&gt;</span>--%>
<%--        <span class="red">&lt;script <span class="blue">src</span><span class="white">=</span><span class="yellow">"js/evo-calendar.js"</span>&gt;&lt;/script&gt;</span>--%>

<%--        <span class="red">&lt;script&gt;</span>--%>
<%--        <span class="green">// initialize your calendar, once the page's DOM is ready</span>--%>
<%--        $(<span class="blue">document</span>).<span class="yellow">ready</span>(<span class="blue">function</span>() {--%>
<%--            $(<span class="red">'#calendar'</span>).<span class="yellow">evoCalendar</span>({--%>
<%--                <span class="violet">settingName</span>: settingValue--%>
<%--            })--%>
<%--        })--%>
<%--        <span class="red">&lt;/script&gt;</span>--%>

<%--    <span class="red">&lt;/body&gt;</span>--%>
<%--<span class="red">&lt;/html&gt;</span>--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </section>--%>
<%--        <!-- settings -->--%>
<%--        <section id="settings">--%>
<%--            <div class="section-content">--%>
<%--                <p class="section-title --lng">settings</p>--%>
<%--                <div class="console-log">--%>
<%--                    <div class="log-content">--%>
<%--                        <table>--%>
<%--                            <tr>--%>
<%--                                <th>settings</th>--%>
<%--                                <th>type</th>--%>
<%--                                <th>default</th>--%>
<%--                                <th>description</th>--%>
<%--                                <th>options</th>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="theme">--%>
<%--                                <td>theme</td>--%>
<%--                                <td>string</td>--%>
<%--                                <td class="gray">Default</td>--%>
<%--                                <td>Define calendar's theme</td>--%>
<%--                                <td>Default, Midnight Blue, Orange Coral, Royal Navy</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="language">--%>
<%--                                <td>language</td>--%>
<%--                                <td>string</td>--%>
<%--                                <td class="red">'en'</td>--%>
<%--                                <td>Calendar's language</td>--%>
<%--                                <td>en, es, de, pt</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="format">--%>
<%--                                <td>format</td>--%>
<%--                                <td>string</td>--%>
<%--                                <td class="red">'mm/dd/yyyy'</td>--%>
<%--                                <td>Date format</td>--%>
<%--                                <td>Date string format</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="titleFormat">--%>
<%--                                <td>titleFormat</td>--%>
<%--                                <td>string</td>--%>
<%--                                <td class="red">'MM yyyy'</td>--%>
<%--                                <td>Date format for calendar title</td>--%>
<%--                                <td>Date string format</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="eventHeaderFormat">--%>
<%--                                <td>eventHeaderFormat</td>--%>
<%--                                <td>string</td>--%>
<%--                                <td class="red">'MM d, yyyy'</td>--%>
<%--                                <td>Date format for calendar event's title</td>--%>
<%--                                <td>Date string format</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="firstDayOfWeek">--%>
<%--                                <td>firstDayOfWeek</td>--%>
<%--                                <td>number</td>--%>
<%--                                <td class="violet">0</td>--%>
<%--                                <td>Displayed first day of the week</td>--%>
<%--                                <td>0 (Sunday) - 6 (Saturday)</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="todayHighlight">--%>
<%--                                <td>todayHighlight</td>--%>
<%--                                <td>boolean</td>--%>
<%--                                <td class="blue">false</td>--%>
<%--                                <td>Highlight today's date in calendar</td>--%>
<%--                                <td>true, false</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="sidebarDisplayDefault">--%>
<%--                                <td>sidebarDisplayDefault</td>--%>
<%--                                <td>boolean</td>--%>
<%--                                <td class="blue">true</td>--%>
<%--                                <td>Set default visibility of sidebar</td>--%>
<%--                                <td>true, false</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="sidebarToggler">--%>
<%--                                <td>sidebarToggler</td>--%>
<%--                                <td>boolean</td>--%>
<%--                                <td class="blue">true</td>--%>
<%--                                <td>Display the button for toggling the sidebar</td>--%>
<%--                                <td>true, false</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="eventDisplayDefault">--%>
<%--                                <td>eventDisplayDefault</td>--%>
<%--                                <td>boolean</td>--%>
<%--                                <td class="blue">true</td>--%>
<%--                                <td>Set default visibility of event lists</td>--%>
<%--                                <td>true, false</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="eventListToggler">--%>
<%--                                <td>eventListToggler</td>--%>
<%--                                <td>boolean</td>--%>
<%--                                <td class="blue">true</td>--%>
<%--                                <td>Display the button for toggling the event lists</td>--%>
<%--                                <td>true, false</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-settings="calendarEvents">--%>
<%--                                <td>calendarEvents</td>--%>
<%--                                <td>array</td>--%>
<%--                                <td class="gray">null</td>--%>
<%--                                <td>Defined events for calendar to show</td>--%>
<%--                                <td>Array of events</td>--%>
<%--                            </tr>--%>
<%--                        </table>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="section-caption"><p>settings example</p></div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code id="event-settings">--%>
<%--<span class="green">// calendarEvents</span>--%>
<%--$(<span class="red">'#calendar'</span>).<span class="yellow">evoCalendar</span>({--%>
<%--    todayHighlight: <span class="blue">true</span>,--%>
<%--    calendarEvents: [--%>
<%--        {--%>
<%--            <span class="red">id</span>: <span class="red">"4hducye"</span>, <span class="green">// Event's id (required, for removing event)</span>--%>
<%--            <span class="red">name</span>: <span class="red">"Today's Event"</span>, <span class="green">// Name of event</span>--%>
<%--            <span class="red">description</span>: <span class="red">"Lorem ipsum dolor sit amet.."</span>, <span--%>
<%--        class="green">// Description of event (optional)</span>--%>
<%--            <span class="red">date</span>: <span class="blue">new</span> <span class="yellow">Date</span>(), <span--%>
<%--        class="green">// Date of event</span>--%>
<%--            <span class="red">type</span>: <span class="red">"holiday"</span>, <span class="green">// Type of event (event|holiday|birthday)</span>--%>
<%--            <span class="red">color</span>: <span class="blue">"#63d867"</span> <span class="green">// Event custom color (optional)</span>--%>
<%--            <span class="red">everyYear</span>: <span class="blue">true</span> <span class="green">// Event is every year (optional)</span>--%>
<%--        }--%>
<%--    ]--%>
<%--})--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="section-content">--%>
<%--                <p class="section-title --shrt">methods</p>--%>
<%--                <div class="console-log">--%>
<%--                    <div class="log-content">--%>
<%--                        <table>--%>
<%--                            <tr>--%>
<%--                                <th>method</th>--%>
<%--                                <th>argument</th>--%>
<%--                                <th>description</th>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="setTheme">--%>
<%--                                <td>setTheme</td>--%>
<%--                                <td class="red">string</td>--%>
<%--                                <td>Set/Change theme</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="toggleSidebar">--%>
<%--                                <td>toggleSidebar</td>--%>
<%--                                <td class="blue">boolean (optional)</td>--%>
<%--                                <td>Toggle sidebar display</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="toggleEventList">--%>
<%--                                <td>toggleEventList</td>--%>
<%--                                <td class="blue">boolean (optional)</td>--%>
<%--                                <td>Toggle event list display</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="getActiveDate">--%>
<%--                                <td>getActiveDate</td>--%>
<%--                                <td class="gray">none</td>--%>
<%--                                <td>Get the selected date</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="getActiveEvents">--%>
<%--                                <td>getActiveEvents</td>--%>
<%--                                <td class="gray">none</td>--%>
<%--                                <td>Get the event(s) of selected date</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="selectYear">--%>
<%--                                <td>selectYear</td>--%>
<%--                                <td class="violet">number</td>--%>
<%--                                <td>Select year programmatically</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="selectMonth">--%>
<%--                                <td>selectMonth</td>--%>
<%--                                <td class="violet">number (0-11)</td>--%>
<%--                                <td>Select month programmatically</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="selectDate">--%>
<%--                                <td>selectDate</td>--%>
<%--                                <td class="red">string</td>--%>
<%--                                <td>Select date programmatically</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="addCalendarEvent">--%>
<%--                                <td>addCalendarEvent</td>--%>
<%--                                <td class="red">array/object</td>--%>
<%--                                <td>Add Calendar event(s)</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="removeCalendarEvent">--%>
<%--                                <td>removeCalendarEvent</td>--%>
<%--                                <td class="red">array/string</td>--%>
<%--                                <td>Remove event(s) by their id</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-method="destroy">--%>
<%--                                <td>destroy</td>--%>
<%--                                <td class="gray">none</td>--%>
<%--                                <td>Well.. destroy the calendar</td>--%>
<%--                            </tr>--%>
<%--                        </table>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="section-caption"><p>methods example</p></div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code id="method-code">--%>
<%--<span class="green">// loading...</span>--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="section-content">--%>
<%--                <p class="section-title --shrt">events</p>--%>
<%--                <div class="console-log">--%>
<%--                    <div class="log-content">--%>
<%--                        <table>--%>
<%--                            <tr>--%>
<%--                                <th>events</th>--%>
<%--                                <th>argument</th>--%>
<%--                                <th>description</th>--%>
<%--                            </tr>--%>
<%--                            <tr data-event="selectDate">--%>
<%--                                <td>selectDate</td>--%>
<%--                                <td class="red">newDate, oldDate</td>--%>
<%--                                <td>Fires after selecting date</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-event="selectEvent">--%>
<%--                                <td>selectEvent</td>--%>
<%--                                <td class="red">activeEvent</td>--%>
<%--                                <td>Fires after selecting event</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-event="selectMonth">--%>
<%--                                <td>selectMonth</td>--%>
<%--                                <td class="red">activeMonth, monthIndex</td>--%>
<%--                                <td>Fires after selecting month</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-event="selectYear">--%>
<%--                                <td>selectYear</td>--%>
<%--                                <td class="red">activeYear</td>--%>
<%--                                <td>Fires after changing year</td>--%>
<%--                            </tr>--%>
<%--                            <tr data-event="destroy">--%>
<%--                                <td>destroy</td>--%>
<%--                                <td class="orange">calendar</td>--%>
<%--                                <td>Fires after destroying calendar</td>--%>
<%--                            </tr>--%>
<%--                        </table>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <div class="section-caption"><p>events example</p></div>--%>
<%--                <div class="console-log --sm">--%>
<%--                    <div class="log-content">--%>
<%--<pre><code id="event-code">--%>
<%--<span class="green">// loading...</span>--%>

<%--</code></pre>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </section>--%>
    </div>
</main>
<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="/resources/js/evo-calendar.js"></script>
<script src="/resources/js/demo.js"></script>
<script>
</script>
</body>
</html>